<template>
  <div class="login-page">
    <div class="card login-card">
      <div class="brand">
        <div class="logo">💰</div>
        <div class="meta">
          <div class="title">旺财神 H5 管理端</div>
          <div class="sub">欢迎回来，请登录继续</div>
        </div>
      </div>
      <form @submit.prevent="onSubmit" class="form">
        <div class="field">
          <label>手机号</label>
          <input class="input" v-model="phone" type="tel" placeholder="请输入手机号" required />
        </div>
        <div class="field">
          <label>密码</label>
          <input class="input" v-model="password" type="password" placeholder="请输入密码" required />
        </div>
        <button class="btn primary" type="submit" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
        <p class="error" v-if="error">{{ error }}</p>
      </form>
    </div>
    <footer class="footer">© 2025 WCS</footer>
  </div>
  
</template>

<script setup lang="ts">
/**
 * 文件级注释：
 * 登录页面（B端）。基于现有接口 `/User/LoginWeChatToB` 完成登录；
 * 登录成功后：保存令牌、获取当前用户信息并保存、调用角色检查以标记是否为平台管理员/平台超级管理员。
 * 仅在 H5 项目中编写/修改代码；接口成功以 code === 0 判定。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { login, getCurrentUser } from '../services/user'
import { isSuccess } from '../services/types'
import { useAuthStore } from '../stores/auth'

const phone = ref('')
const password = ref('')
const loading = ref(false)
const error = ref('')

const router = useRouter()
const route = useRoute()
const auth = useAuthStore()

/**
 * 函数级注释：提交登录
 * @returns Promise<void> 无返回值，流程性操作
 * @throws 可能抛出网络异常；服务端返回非 0 code 不抛出异常而提示错误
 */
async function onSubmit() {
  error.value = ''
  if (!phone.value || !password.value) {
    error.value = '请填写手机号和密码'
    return
  }
  loading.value = true
  try {
    const result = await login({
      Phone: phone.value,
      Password: password.value
    })
    if (result?.code === 0 && result?.data) {
      /**
       * 完整方法代码：登录成功后的处理逻辑（含平台权限校验）
       * 1. 保存令牌
       * 2. 拉取并保存当前用户信息
       * 3. 刷新并校验平台角色（仅平台管理员/平台超级管理员允许登录）
       * 4. 合法则跳转，非法则清理状态并提示错误
       * @returns void 无返回值
       * @throws 可能抛出网络异常（内部已 try-catch 防御）
       */
      auth.setToken(result.data as string)
      // 1) 获取当前用户信息并保存
      try {
        const userRes = await getCurrentUser()
        if (isSuccess(userRes) && userRes.data) {
          auth.setUser(userRes.data)
        }
      } catch { /* 忽略获取用户信息失败，不阻断登录 */ }
      // 2) 刷新平台角色标记（平台管理员/平台超级管理员）
      try {
        await auth.refreshRoleFlags()
      } catch { /* 忽略角色刷新失败，不阻断登录 */ }
      // 3) 角色校验：无平台权限则阻止登录
      if (!(auth.isPlatformAdmin || auth.isPlatformSuperAdmin)) {
        // 清理登录状态，给出错误提示
        auth.logout()
        error.value = '无平台权限：仅平台管理员或平台超级管理员可登录'
        loading.value = false
        return
      }
      // 4) 有权限则跳转
      const redirect = (route.query.redirect as string) || '/dashboard'
      router.replace(redirect)
    } else {
      error.value = result?.message || '登录失败，请稍后重试'
    }
  } catch (e: any) {
    error.value = e?.message || '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
  padding: var(--space-6);
  position: relative;
}

.login-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.login-card { 
  width: 420px; 
  max-width: 90vw;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: var(--space-4); 
  margin-bottom: var(--space-8); 
  justify-content: center;
}

.logo { 
  width: 56px; 
  height: 56px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-xl); 
  background: linear-gradient(135deg, var(--primary), var(--primary-600)); 
  color: #fff; 
  font-size: var(--text-2xl);
  box-shadow: var(--shadow-lg);
}

.meta {
  text-align: center;
}

.title { 
  font-size: var(--text-2xl); 
  font-weight: 700; 
  color: var(--text);
  margin-bottom: var(--space-1);
}

.sub { 
  font-size: var(--text-sm); 
  color: var(--text-muted); 
}

.form {
  margin-top: var(--space-6);
}

.form .field { 
  margin-bottom: var(--space-6); 
  display: flex; 
  flex-direction: column;
  gap: var(--space-2); 
}

label { 
  margin: 0; 
  font-size: var(--text-sm); 
  color: var(--text-secondary); 
  font-weight: 500;
}

.input { 
  width: 100%; 
}

.btn { 
  width: 100%; 
  margin-top: var(--space-4);
  height: 48px;
  font-size: var(--text-base);
}

.btn[disabled] { 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none !important;
}

.error { 
  color: var(--danger); 
  margin-top: var(--space-4); 
  text-align: center; 
  font-size: var(--text-sm);
  padding: var(--space-3);
  background: var(--danger-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.footer { 
  height: 40px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--text-light); 
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
}

@media (max-width: 480px) {
  .login-page {
    padding: var(--space-4);
  }
  
  .login-card {
    width: 100%;
    padding: var(--space-6);
  }
  
  .brand {
    margin-bottom: var(--space-6);
  }
  
  .logo {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
  }
  
  .title {
    font-size: var(--text-xl);
  }
}
</style>
